<template>
  <div class="wrapper">
  <div class="switchTitle">
   <Button class="switchButton"  type="primary">保存</Button>   
   <Button class="switchButton"  >预览</Button>   
      <span class="switchClose"><Icon type="ios-close" size="32"/></span>
    </div>
      <div class="mainContent">
        <div class="flexContent">
           <div class="flexContentLeft">
            <div class="switchTitle"> 
            <ul class="mainContentUl">
              <li class="mainContentTitle">
                  <span @click="openSplit = true ">界面分割</span>
              </li>
                <li class="mainContentTitle">
                  <span>增行</span>
              </li>
            </ul>
          
            <splitModal  v-model="openSplit" @changeVal="changeVal"></splitModal>
          </div>
          <div class="designBoard designBoardPosition">
            <div id="designItem">
                  <Row type="flex" :key="item1" v-for="(item1,index1) in pagesEl" class="designRow" :style="{width:item1.width,height:item1.height}">
                    <Col :key="item"
                      ref="colItem"
                      v-for="(item2,index2) in item1.children" 
                      class="designCol"
                      :style="{width:item2.width,height:item2.height}"    
                        @mousemove.native="_move(item2.content,index1,index2)"    
                        @mousedown.native="_mousedown(item2.content,index1,index2,$event)"   
                        @mouseup.native="_mouseup(item2.content,index1,index2,$event)"                    
                      >
                     <div class="designBoardAb designBoardHtml"                                   
                        v-html="item2.content">

                     </div>
                    </Col>
                  </Row>
            </div>
           
          </div>
        </div>
        <div class="flexContentRight">
             <div class="switchTitle"> 
            <ul class="mainContentUl ">
              <li class="mainContentTitle ">
                  <span >栏目内容</span>
              </li>
            </ul>        
          </div>
          <div class="designBoard split-atrr" ref="leftSplit"  @mousemove="scrollHeightChange(1)" @mouseout="scrollHeightChange(2)">
                <Scroll ref="ivScroll" :height="scrollHeight"  :class="{scrollMain:scrollMain}">   
                    <ul class="mainContentUl mainContentUl1" ref="contentScroll">    
                      <li class="mainContentTitle mainContentTitle1"
                       v-for=" (item,index) in contentEl"
                        :key="index"
                        @mousemove="_moveContent(item.content)"    
                        @mousedown="_mouseDownContent(item.content)"   
                        @mouseup="_mouseUpContent(item.content,'right')"   
                        >
                          <div class="designBoardAb designborder"                                      
                                v-html="item.content">
                            </div>
                          
                      </li>
                    </ul>     
                </Scroll>          
               
          </div>
        </div>
        </div>
       
        
      </div>
  </div>
</template>
<script>
import splitModal from "./ui-design-split"
export default {
name:'ui-design-board',
components:{splitModal},
  props:{},
  data(){
    return {
      position:null,
       scrollHeight:'100%',
      scrollMain:true,
      designBoardHtml:null,
      openSplit:false,
      draggable:true,
      getEl:'',
      setEl:'',
      pagesEl:[
             {
               name:'row',
               width:'100%',
               height:'20%',
               content:'1<div>1</div>',
               children:[
                { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'1'},
                 { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'2'},  { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'3'},  { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'4'}
               ]
             },       {
               name:'row',
               width:'100%',
               height:'20%',
               content:'<div>2</div>',
               children:[
                { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'d'},
                 { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'c'},  { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'b'},  { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'a'}
               ]
             }
            

      ],
      contentEl:[
        {
          name:'html1',
          content:'html1'
        },
          {
          name:'html2',
          content:'html2'
        },
          {
          name:'html3',
          content:'html3'
        },
          {
          name:'html4',
          content:'html4'
        },
          {
          name:'html4',
          content:'html5'
        },   {
          name:'html1',
          content:'html1'
        },
          {
          name:'html2',
          content:'html2'
        },
          {
          name:'html3',
          content:'html3'
        },
          {
          name:'html4',
          content:'html4'
        },
          {
          name:'html4',
          content:'html5'
        },   {
          name:'html1',
          content:'html1'
        },
          {
          name:'html2',
          content:'html2'
        },
          {
          name:'html3',
          content:'html3'
        },
          {
          name:'html4',
          content:'html4'
        },
          {
          name:'html4',
          content:'html5'
        }
      ]
    }
  },
  watch:{},
  computed:{},
  methods:{
    changeVal(val){
      this.openSplit=val.modal
    if(val.form){
              this.pagesEl=val.form
    }
    },
    // 左侧拖拽
    _move(e,index1,index2){
       this.setEl={target:e,index1:index1,index2:index2}
    },
    _mousedown(e,index1,index2,event){
      this.position='left';
      this.getEl={target:e,index1:index1,index2:index2}
  
      
    },
     _mouseup(e,index1,index2,event){

               if(this.position=='right'){
                   this.pagesEl[index1].children[index2].content=this.getEl.target
                return
               }else if (this.position=='left'){
                if(!this.getEl) return
                if(!this.setEl) return
                console.log(this.setEl.target)
                this.pagesEl[this.getEl.index1].children[this.getEl.index2].content=this.setEl.target
                console.log( this.pagesEl[this.getEl.index1].children[this.getEl.index2].content=this.setEl.target)
                this.pagesEl[this.setEl.index1].children[this.setEl.index2].content=this.getEl.target 
                return  
               }
       
    },
    // 右侧拖拽
     _moveContent(e){
           let el = e.target;
           
    },
       _mouseDownContent(e){
         this.getEl={target:e,index1:null,index2:null}
         this.position="right"
          console.log(this.getEl)
      
    },
    _mouseUpContent(e){
          
    },
       scrollHeightChange(val){//滚动条 出现 收起
        if(val==1){
        if(this.$refs.leftSplit.clientHeight>this.$refs.contentScroll.clientHeight) return  //如果没有超出  滚动条不显示
         this.scrollMain=false
        }else if(val==2){
                this.scrollMain=true
        }
    }
  },
  created(){},
  mounted(){
    this.scrollHeight=this.$refs.leftSplit.clientHeight

  }
}
</script>
<style lang="less" scoped>
.wrapper{width:100%;}
.switchTitle{
  height: 50px;
}
.switchButton{
    margin-right: 16px;
}
.mainContent{
  border: 1px solid  rgba(220, 222, 226, 1);
  width:100%;
  height:calc(~"100% - 50px");
}
.mainContentUl{
height: 100%;
width: 100%;
padding-left:12px;
border-bottom: 1px solid  rgba(220, 222, 226, 1);
}
.mainContentTitle{
  list-style: none;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
  margin-right: 12px;
}
.mainContentUl1{
  padding: 0;
  margin: 0;
    height: auto;
}
.mainContentTitle1{
  display: inline-block;
  width: 100%;
    height:auto;
  float:none;
  margin: 0;
  padding: 4px;


}
.mainContentTitle span{
  cursor: pointer;
  display: inline;
  padding: 4px;
}
.designBoard{
    
  width: 100%;
  height:calc(~"100% - 50px");
}
#designItem{
height: 100%;
width: 100%;
}
.switchClose{
  float: right;
  cursor: pointer;

}
.designCol{
  cursor: pointer;
    border: 1px solid  rgba(220, 222, 226, 1);
}
.designCol:last-child{
    border-right: 1px solid  rgba(220, 222, 226, 1);
   
}
.designRow{
      border-top: 1px dashed rgba(220, 222, 226, 1);
}
.designRow:last-child{
    border-bottom: 1px dashed  rgba(220, 222, 226, 1);
}
.designBoardPosition{
  position: relative;
}
.designBoardAb{
  width:100%;height:100%;
  user-select: none;
 
}
.designHtml{
  user-select:text;
}
.flexContent{
  display: flex;
  width:100%;height:100%;
}
.flexContentLeft{
  flex: 4;
}
.flexContentRight{
   border-left: 1px solid  rgba(220, 222, 226, 1);
  flex: 1;
}
.designborder{
     border: 1px solid  rgba(220, 222, 226, 1);
       cursor: pointer;
       height: 60px;
}
</style>